<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>details详情</title>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
	<form id="StudentInfo">
		<div><input type="text" name="id" v-model="id" class="hidden"></div>
		<div>姓名：<input type="text" name="name" v-model="name"></div>
		<div>年龄：<input type="text" name="age" v-model="age"></div>
		<div>
			<input type="radio" value="0" v-model="sex">
			<label for="0">女</label>
			<input type="radio" value="1" v-model="sex">
			<label for="1">男</label>
		</div>
		<div>地址：<input type="text" name="address" v-model="address.name"></div>
		<div>邮编：<input type="text" name="postcode" v-model="address.postcode"></div>
		<div>msg:{{$data}}</div>
	</form>

	<div id="example">
	  <my-component></my-component>
	  <simple-counter></simple-counter>
	  <simple-counter></simple-counter>
	  <simple-counter></simple-counter>
	</div>

	<div id="example1">
	  <input v-model="parentMsg">
	  <br>
	  <child v-bind:my-message="parentMsg"></child>
	</div>

	<div id="counter-event-example">
	  <p>{{ total }}</p>
	  <button-counter v-on:increment="incrementTotal"></button-counter>
	  <button-counter v-on:increment="incrementTotal"></button-counter>
	</div>
	
	<div id="example2">
		<currency-input v-model="price"></currency-input>
	</div>

	<script type="text/javascript">
		// 注册
		Vue.component('currency-input', {
		  template: '\
		    <span>\
		      $\
		      <input\
		        ref="input"\
		        v-bind:value="value"\
		        v-on:input="updateValue($event.target.value)"\
		      >\
		    </span>\
		  ',
		  props: ['value'],
		  methods: {
		    // 不是直接更新值，而是使用此方法来对输入值进行格式化和位数限制
		    updateValue: function (value) {
		      var formattedValue = value
		        // 删除两侧的空格符
		        .trim()
		        // 保留 2 小数位
		        .slice(0, value.indexOf('.') + 3)
		      // 如果值不统一，手动覆盖以保持一致
		      if (formattedValue !== value) {
		        this.$refs.input.value = formattedValue
		      }
		      // 通过 input 事件发出数值
		      this.$emit('input', Number(formattedValue))
		    }
		  }
		})

		Vue.component('child', {
		  // camelCase in JavaScript
		  props: ['myMessage'],
		  template: '<span>{{ myMessage }}</span>'
		})
		
		Vue.component('my-component', {
		  template: '<div>A custom component!</div>'
		})

		Vue.component('my-component', {
		  template: '<div>A custom component!</div>'
		})

		var data = { counter: 0 }

		Vue.component('simple-counter', {
		  template: '<button v-on:click="counter += 1">{{ counter }}</button>',
		  // data 是一个函数，因此 Vue 不会警告，
		  // 但是我们为每一个组件返回了同一个对象引用
		  data: function () {
		  	//return data
		    return {
			  counter: 0
			}
		  }
		})

		Vue.component('button-counter', {
		  template: '<button v-on:click="increment">{{ counter }}</button>',
		  data: function () {
		    return {
		      counter: 0
		    }
		  },
		  methods: {
		    increment: function () {
		      this.counter += 1
		      this.$emit('increment')
		    }
		  },
		})

		new Vue({
		  el: '#counter-event-example',
		  data: {
		    total: 0
		  },
		  methods: {
		    incrementTotal: function () {
		      this.total += 1
		    }
		  }
		})

		new Vue({
		  el: '#example1',
		  data:{
		  	parentMsg:"hello"
		  }
		})

		// 创建根实例
		new Vue({
		  el: '#example'
		})

		// 创建根实例
		new Vue({
		  el: '#example2',
		  data:{
		  	price:0
		  }
		})

		var INFO = {},
			StudentInfoApp = null;
		//获取数据
		$.getJSON('student.json', function(json, textStatus) {
			if(json.errorcode === 0) {
				INFO = json.data;
			}

			StudentInfoApp = new Vue({
				el: '#StudentInfo',
				data: INFO,
				beforeCreate:function () {
					if (INFO.address === null) {
						INFO.address = {
							"name":"",
							"postcode":""
						}
					}
				}
			});
		});
	</script>
	<!-- <script type="text/javascript">
		var $form = $('#StudentInfo');

		//显示详情
		function showInfo(){
			$.getJSON('student.json', function(json, textStatus) {
				if(json.errorcode === 0) {
					//当然也可以用循环
					$form.find('input[name="name"]').val(json.data.name);
					$form.find('input[name="age"]').val(json.data.name);
					//省略部分
					if (json.data.address) {//可能address为null
						$form.find('input[name="address"]').val(json.data.address.name);
						$form.find('input[name="postcode"]').val(json.data.address.postcode);
					}
				}
			});
		}

		//提交修改
		function doPost () {
			var dataObj = {},
				addressObj = {};
			dataObj['id'] = $form.find('input[name="id"]').val();
			//省略部分取值
			//地址对象
			addressObj['name'] = $form.find('input[name="address"]').val();
			addressObj['postcode'] = $form.find('input[name="postcode"]').val();

			dataObj['address'] = addressObj;

			$.post(url, dataObj, function(data, textStatus, xhr) {
				data.errorcode === 0? alert('修改成功！'):alert('修改失败！');
			});
		}

	</script> -->

</body>
</html>